<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">订单信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    订单号：<span>{{orderInfo.buyerBill.id}}</span>
                </el-col>
                <el-col :span="8">
                    车辆信息：<span>{{orderInfo.buyerOrderList.productInfo}}</span>
                </el-col>
                <el-col :span="8">
                    支付金额：<span>{{orderInfo.currency}} {{orderInfo.amount}}</span>
                </el-col>
                <el-col :span="8">
                    支付方式：<span>{{orderInfo.buyerOrderList.payMode}}</span>
                </el-col>

            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">进口商信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row" v-if="orderInfo.buyerBankList">
                <el-col :span="8">
                    企业名称：<span>{{orderInfo.buyerBill.buyerName}}</span>
                </el-col>
                <el-col :span="8 " v-if="orderInfo.buyerBankList.bankName">
                    付款银行：<span>{{orderInfo.buyerBankList.bankName}}</span>
                </el-col>
                <el-col :span="8" v-if="orderInfo.buyerBankList.accountName">
                    账户名：<span>{{orderInfo.buyerBankList.accountName || ''}}</span>
                </el-col>
                <el-col :span="8" v-if="orderInfo.buyerBankList.accountNo">
                    银行账号：<span>{{orderInfo.buyerBankList.accountNo || ''}}</span>
                </el-col>
            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">平台账户信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    收款银行：<span>{{orderInfo.platformBankInfo.bankBranchName}}</span>
                </el-col>
                <el-col :span="8">
                    账户名：<span>{{orderInfo.platformBankInfo.accountName}}</span>
                </el-col>
                <el-col :span="8">
                    银行账号：<span>{{orderInfo.platformBankInfo.accountNo}}</span>
                </el-col>
            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">支付信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    <el-button type="primary" @click="handleOpenFile(orderInfo.buyerBill.payProofUrl)" v-if="orderInfo.buyerBill.payProofUrl != null">查看付汇凭证</el-button>
                </el-col>
            </el-row>
        </c-template>
        <el-row :gutter="24" type="flex" justify="end" v-if="orderInfo.buyerBill.status == 2">
            <el-col :span="24" class="flex-x-end">
                <el-button type="primary" @click="handleApprove(true)">确认已收款</el-button>
                <el-button type="default" @click="handleApprove(false)">未收款</el-button>
            </el-col>
        </el-row>

    </div>
</template>
<script>
export default {

    data () {
        return {
            loading: false,
            orderInfo: {
                buyerBill: {},
                buyerBankList: {},
                buyerOrderList: {},
                platformBankInfo: {}
            },
            id: ""
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        handleApprove (flag) {

            this.$confirm("是否确认该审批结果?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                let data = {
                    id: this.id,
                    flag: flag,
                };
                this.$post({
                    url: "/buyerBill/platformConfirm",
                    data,
                }).then(
                    () => {
                        this.$message.success("审批成功");
                        this.loading = false;
                        this.getInfo()
                    },
                    () => {
                        this.loading = false;
                    }
                );
            })
        },
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/buyerBill/getDetail", params })
                this.orderInfo = res

                this.loading = false;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.imgList {
    display: flex;
    .el-image {
        width: 30%;
        margin: 0 auto;
    }
}
</style>